<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
<!--   <link rel="stylesheet/less" type="text/css" href="bootstrap/less/bootstrap.less">
  <script src="less.min.js" type="text/javascript"></script>
 -->
  <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
  <!-- <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-ie6.css"> -->

  <!--[if lte IE 6]>
  <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-ie6.css">
  <![endif]-->
  <!--[if lte IE 7]>
  <link rel="stylesheet" type="text/css" href="bootstrap/css/ie.css">
  <![endif]-->

</head>
<body style="padding:20px;">


<style>


</style>

<div style="width:800px;">

<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
 
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

<div class="bs-docs-example">
  <ul class="breadcrumb">
    <li class="active">Home</li>
  </ul>
  <ul class="breadcrumb">
    <li><a href="#">Home</a> <span class="divider">/</span></li>
    <li class="active">Library</li>
  </ul>
  <ul class="breadcrumb" style="margin-bottom: 5px;">
    <li><a href="#">Home</a> <span class="divider">/</span></li>
    <li><a href="#">Library</a> <span class="divider">/</span></li>
    <li class="active">Data</li>
  </ul>
</div>

<div class="bs-docs-example" style="background-color: #f5f5f5;">
  <input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source="[&quot;Alabama&quot;,&quot;Alaska&quot;,&quot;Arizona&quot;,&quot;Arkansas&quot;,&quot;California&quot;,&quot;Colorado&quot;,&quot;Connecticut&quot;,&quot;Delaware&quot;,&quot;Florida&quot;,&quot;Georgia&quot;,&quot;Hawaii&quot;,&quot;Idaho&quot;,&quot;Illinois&quot;,&quot;Indiana&quot;,&quot;Iowa&quot;,&quot;Kansas&quot;,&quot;Kentucky&quot;,&quot;Louisiana&quot;,&quot;Maine&quot;,&quot;Maryland&quot;,&quot;Massachusetts&quot;,&quot;Michigan&quot;,&quot;Minnesota&quot;,&quot;Mississippi&quot;,&quot;Missouri&quot;,&quot;Montana&quot;,&quot;Nebraska&quot;,&quot;Nevada&quot;,&quot;New Hampshire&quot;,&quot;New Jersey&quot;,&quot;New Mexico&quot;,&quot;New York&quot;,&quot;North Dakota&quot;,&quot;North Carolina&quot;,&quot;Ohio&quot;,&quot;Oklahoma&quot;,&quot;Oregon&quot;,&quot;Pennsylvania&quot;,&quot;Rhode Island&quot;,&quot;South Carolina&quot;,&quot;South Dakota&quot;,&quot;Tennessee&quot;,&quot;Texas&quot;,&quot;Utah&quot;,&quot;Vermont&quot;,&quot;Virginia&quot;,&quot;Washington&quot;,&quot;West Virginia&quot;,&quot;Wisconsin&quot;,&quot;Wyoming&quot;]"><ul class="typeahead dropdown-menu" style="top: 69px; left: 19px; display: none;"><li data-value="Alabama" class=""><a href="#"><strong>A</strong>l<strong>a</strong>b<strong>a</strong>m<strong>a</strong></a></li><li data-value="Alaska" class=""><a href="#"><strong>A</strong>l<strong>a</strong>sk<strong>a</strong></a></li><li data-value="Arizona" class="active"><a href="#"><strong>A</strong>rizon<strong>a</strong></a></li><li data-value="Arkansas"><a href="#"><strong>A</strong>rk<strong>a</strong>ns<strong>a</strong>s</a></li></ul>
</div>

<br />

<div class="bs-docs-example">
  <div class="progress progress-info" style="margin-bottom: 9px;">
    <div class="bar" style="width: 20%"></div>
  </div>
  <div class="progress progress-success" style="margin-bottom: 9px;">
    <div class="bar" style="width: 40%"></div>
  </div>
  <div class="progress progress-warning" style="margin-bottom: 9px;">
    <div class="bar" style="width: 60%"></div>
  </div>
  <div class="progress progress-danger">
    <div class="bar" style="width: 80%"></div>
  </div>
</div>
<div class="progress">
  <div class="bar bar-success" style="width: 35%"></div>
  <div class="bar bar-warning" style="width: 20%"></div>
  <div class="bar bar-danger" style="width: 10%"></div>
</div>
<div class="progress progress-striped active">
  <div class="bar" style="width: 45%"></div>
</div>
<div class="progress progress-striped">
  <div class="bar" style="width: 20%;"></div>
</div>


<div class="bs-docs-example">
  <div class="alert alert-block alert-error fade in" style="">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <h4 class="alert-heading" style="">Oh snap! You got an error!</h4>
    <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
    <p>
      <a class="btn btn-danger" href="#">Take this action</a> <a class="btn" href="#">Or do this</a>
    </p>
  </div>
</div>

<div class="alert alert-info">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-success">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-error">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
<div class="alert alert-block">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <h4>Warning!</h4>
  <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</div>
<div class="alert">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>

<table class="table table-bordered table-striped">
  <thead>
    <tr>
      <th>Name</th>
      <th>Example</th>
      <th>Markup</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Default
      </td>
      <td>
        <span class="badge">1</span>
      </td>
      <td>
        <code>&lt;span class="badge"&gt;1&lt;/span&gt;</code>
      </td>
    </tr>
    <tr>
      <td>
        Success
      </td>
      <td>
        <span class="badge badge-success">2</span>
      </td>
      <td>
        <code>&lt;span class="badge badge-success"&gt;2&lt;/span&gt;</code>
      </td>
    </tr>
    <tr>
      <td>
        Warning
      </td>
      <td>
        <span class="badge badge-warning">4</span>
      </td>
      <td>
        <code>&lt;span class="badge badge-warning"&gt;4&lt;/span&gt;</code>
      </td>
    </tr>
    <tr>
      <td>
        Important
      </td>
      <td>
        <span class="badge badge-important">6</span>
      </td>
      <td>
        <code>&lt;span class="badge badge-important"&gt;6&lt;/span&gt;</code>
      </td>
    </tr>
    <tr>
      <td>
        Info
      </td>
      <td>
        <span class="badge badge-info">8</span>
      </td>
      <td>
        <code>&lt;span class="badge badge-info"&gt;8&lt;/span&gt;</code>
      </td>
    </tr>
    <tr>
      <td>
        Inverse
      </td>
      <td>
        <span class="badge badge-inverse">10</span>
      </td>
      <td>
        <code>&lt;span class="badge badge-inverse"&gt;10&lt;/span&gt;</code>
      </td>
    </tr>
  </tbody>
</table>


<table class="table table-bordered table-striped">
  <thead>
    <tr>
      <th>Labels</th>
      <th>Markup</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <span class="label">Default</span>
      </td>
      <td>
        <code>&lt;span class="label"&gt;Default&lt;/span&gt;</code>
      </td>
    </tr>
    <tr>
      <td>
        <span class="label label-success">Success</span>
      </td>
      <td>
        <code>&lt;span class="label label-success"&gt;Success&lt;/span&gt;</code>
      </td>
    </tr>
    <tr>
      <td>
        <span class="label label-warning">Warning</span>
      </td>
      <td>
        <code>&lt;span class="label label-warning"&gt;Warning&lt;/span&gt;</code>
      </td>
    </tr>
    <tr>
      <td>
        <span class="label label-important">Important</span>
      </td>
      <td>
        <code>&lt;span class="label label-important"&gt;Important&lt;/span&gt;</code>
      </td>
    </tr>
    <tr>
      <td>
        <span class="label label-info">Info</span>
      </td>
      <td>
        <code>&lt;span class="label label-info"&gt;Info&lt;/span&gt;</code>
      </td>
    </tr>
    <tr>
      <td>
        <span class="label label-inverse">Inverse</span>
      </td>
      <td>
        <code>&lt;span class="label label-inverse"&gt;Inverse&lt;/span&gt;</code>
      </td>
    </tr>
  </tbody>
</table>


<div class="bs-docs-example">
  <ul class="pager">
    <li class="previous disabled"><a href="#">← Older</a></li>
    <li class="next"><a href="#">Newer →</a></li>
  </ul>

  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</div>

<table class="table table-hover">
  <thead>
    <tr class="success">
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>Mark</td>
      <td>Otto</td>
      <td>@TwBootstrap</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<div class="bs-docs-example">
  <div class="pagination pagination-centered">
    <ul>
      <li><a href="#">«</a></li>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">»</a></li>
    </ul>
  </div>
</div>
<br /><br /><br /><br />

<p>
For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</p>
<pre>
  &lt;p&gt;Sample text here...&lt;/p&gt;
</pre>

<blockquote class="pull-right">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>

<br /><br /><br /><br /><br />
<dl class="dl-horizontal">
  <dt>Description lists</dt>
  <dd>A description list is perfect for defining terms.</dd>
  <dt>Euismod</dt>
  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
  <dd>Donec id elit non mi porta gravida at eget metus.</dd>
  <dt>Malesuada porta</dt>
  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
  <dt>Felis euismod semper eget lacinia</dt>
  <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl>

    <p style="height:1000px;"></p>


</div>

  <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
  <!--[if lte IE 6]>
  <script type="text/javascript" src="js/bootstrap-ie.js"></script>
  <![endif]-->
  <script type="text/javascript">

  </script>
</body>
</html>